<template>
  <n-flex justify="center" vertical>
    <n-space bordered>
      <n-avatar round :src="logo"/>
      <n-button size="medium" :strong="true" type="success" quaternary style="font-size: 30px">SureBet</n-button>
    </n-space>
    <n-divider/>
    <n-flex justify="center" vertical style="margin-top: 40px">
      <n-dropdown trigger="hover" :options="options" @select="handleSelect" v-if="!imDisplay">
        <n-button type="warning" dashed>
          添加账号
        </n-button>
      </n-dropdown>

      <n-flex justify="center" align="center" bordered style="">
        <n-button strong secondary type="warning">
          平博账号:
        </n-button>
        <n-text style="color: red; font-weight: bold">{{ pbLoginStatus ? "已登录" : "未登录" }}</n-text>
      </n-flex>

      <n-space vertical style="margin-left: 8px;">
        <n-space>
          <n-text>
            账号:
          </n-text>
          <n-gradient-text :size="15" style="color: #e4b073; font-weight: bold">
            {{ userContextStore.pbUserInfo.userId }}
          </n-gradient-text>
        </n-space>
        <n-space>
          <n-text>
            账号ID:
          </n-text>
          <n-gradient-text type="error" :size="15" style="color: #e4b073; font-weight: bold">
            {{ userContextStore.pbUserInfo.userName }}
          </n-gradient-text>
        </n-space>

        <n-space>
          <n-text>
            余额:
          </n-text>
          <n-gradient-text type="error" :size="15" style="color: #b30f62; font-weight: bold">
            {{ userContextStore.pbUserInfo.balance }}
          </n-gradient-text>
        </n-space>

        <n-space>
          <n-button @click="createPbWindow">
            打开
            <template #icon>
              <n-icon>
                <svg t="1725948313114" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="1464" width="200" height="200">
                  <path
                    d="M512 537.6a230.4 230.4 0 1 1 0-460.8 230.4 230.4 0 0 1 0 460.8z m0-51.2a179.2 179.2 0 1 0 0-358.4 179.2 179.2 0 0 0 0 358.4z"
                    fill="#758DFF" p-id="1465"></path>
                  <path
                    d="M947.2 921.6a25.6 25.6 0 1 1-51.2 0 382.464 382.464 0 0 0-101.7344-260.4032 25.6 25.6 0 1 1 37.5808-34.7136A433.664 433.664 0 0 1 947.2 921.6zM512 486.4a25.6 25.6 0 1 1 0 51.2A384 384 0 0 0 128 921.6a25.6 25.6 0 1 1-51.2 0A435.2 435.2 0 0 1 512 486.4z"
                    fill="#758DFF" p-id="1466"></path>
                </svg>
              </n-icon>
            </template>
          </n-button>
          <n-button @click="getPbUserInfo">
            刷新
            <template #icon>
              <n-icon>
                <svg t="1725943249545" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="4396" width="200" height="200">
                  <path
                    d="M824.6 611.3c-3.2 165-138 297.8-303.8 297.8-167.8 0-303.9-136.1-303.9-303.9S353 301.3 520.8 301.3v-91.7c-218.5 0-395.6 177.1-395.6 395.6s177.1 395.6 395.6 395.6c216.5 0 392.3-173.8 395.6-389.5h-91.8z"
                    fill="#5F5F5F" p-id="4397"></path>
                  <path d="M839.9 265.7L520.8 64.2l-0.1 374.2z" fill="#5F5F5F" p-id="4398"></path>
                </svg>
              </n-icon>
            </template>
          </n-button>

        </n-space>
      </n-space>

      <div v-if="imDisplay">
        <n-flex justify="center" align="center" bordered style="margin-top: 20px">
          <n-button strong secondary type="warning">
            IM账号:
          </n-button>
          <n-text style="color: red; font-weight: bold">{{ imLoginStatus ? "已登录" : "未登录" }}</n-text>
        </n-flex>

        <n-space vertical style="margin-left: 8px;">
          <n-space>
            <n-text>
              账号:
            </n-text>
            <n-gradient-text :size="15" style="color: #e4b073; font-weight: bold">
              {{ userContextStore.pbUserInfo.userId }}
            </n-gradient-text>
          </n-space>
          <n-space>
            <n-text>
              账号ID:
            </n-text>
            <n-gradient-text type="error" :size="15" style="color: #e4b073; font-weight: bold">
              {{ userContextStore.pbUserInfo.userName }}
            </n-gradient-text>
          </n-space>

          <n-space>
            <n-text>
              余额:
            </n-text>
            <n-gradient-text type="error" :size="15" style="color: #b30f62; font-weight: bold">
              {{ userContextStore.pbUserInfo.balance }}
            </n-gradient-text>
          </n-space>

          <n-space>
            <n-button @click="createPbWindow">
              打开
              <template #icon>
                <n-icon>
                  <svg t="1725948313114" class="icon" viewBox="0 0 1024 1024" version="1.1"
                       xmlns="http://www.w3.org/2000/svg" p-id="1464" width="200" height="200">
                    <path
                      d="M512 537.6a230.4 230.4 0 1 1 0-460.8 230.4 230.4 0 0 1 0 460.8z m0-51.2a179.2 179.2 0 1 0 0-358.4 179.2 179.2 0 0 0 0 358.4z"
                      fill="#758DFF" p-id="1465"></path>
                    <path
                      d="M947.2 921.6a25.6 25.6 0 1 1-51.2 0 382.464 382.464 0 0 0-101.7344-260.4032 25.6 25.6 0 1 1 37.5808-34.7136A433.664 433.664 0 0 1 947.2 921.6zM512 486.4a25.6 25.6 0 1 1 0 51.2A384 384 0 0 0 128 921.6a25.6 25.6 0 1 1-51.2 0A435.2 435.2 0 0 1 512 486.4z"
                      fill="#758DFF" p-id="1466"></path>
                  </svg>
                </n-icon>
              </template>
            </n-button>
            <n-button @click="getPbUserInfo">
              刷新
              <template #icon>
                <n-icon>
                  <svg t="1725943249545" class="icon" viewBox="0 0 1024 1024" version="1.1"
                       xmlns="http://www.w3.org/2000/svg" p-id="4396" width="200" height="200">
                    <path
                      d="M824.6 611.3c-3.2 165-138 297.8-303.8 297.8-167.8 0-303.9-136.1-303.9-303.9S353 301.3 520.8 301.3v-91.7c-218.5 0-395.6 177.1-395.6 395.6s177.1 395.6 395.6 395.6c216.5 0 392.3-173.8 395.6-389.5h-91.8z"
                      fill="#5F5F5F" p-id="4397"></path>
                    <path d="M839.9 265.7L520.8 64.2l-0.1 374.2z" fill="#5F5F5F" p-id="4398"></path>
                  </svg>
                </n-icon>
              </template>
            </n-button>

          </n-space>
        </n-space>

      </div>

      <n-divider/>
    </n-flex>
  </n-flex>
</template>

<script setup>
import logo_icon from '@/assets/images/dear.jpg'
import {h, ref} from "vue";
import {PersonCircleOutline as UserIcon} from '@vicons/ionicons5'
import {NIcon, useMessage} from "naive-ui";
import {ipc} from '@/utils/ipcRenderer';
import {ipcApiRoute} from "@/api/rpcRouter";
import {cloneDeep} from "lodash";
import {useContextStore} from '@/stores/userContext';
import {useConfigStore} from '@/stores/config';
import userAPi from '@/api/user';

const userContextStore = useContextStore();
const configStore = useConfigStore();
const message = useMessage()

const pbLoginStatus = ref(false)
const pbLoginTimerId = ref([])


const imDisplay = ref(false)
const imLoginStatus = ref(false)

function handleSelect(item) {
  if (item === 'im_platform') {
    message.info("打开IM");
    imDisplay.value = true
  }
  if (item === 'wd_platform') {
    message.warning("还没有实现,敬请期待!");
  }
}

function renderIcon(icon) {
  return () => {
    return h(NIcon, null, {
      default: () => h(icon)
    });
  };
}

const getPbUserInfo = ()=>{
  userAPi.GetPbUserAPI().then((res) => {
    if (res && res.data && res.data.userId) {
      window.$message.success("刷新成功")
      userContextStore.setPbUserInfo(res.data)
    }
  }).catch((err) => {
    window.$message.error("刷新失败")
  })
}

const createPbWindow = () => {
  openWindowPd.value.contentUrl = configStore.config.pbUrl
  openWindowPd.value.userName = configStore.config.pbUserName
  openWindowPd.value.password = configStore.config.pbPassWord
  ipc.invoke(ipcApiRoute.createPdWindow, cloneDeep(openWindowPd.value)).then(response => {
    openWindowPd.value.windowsId = response
    // 延迟查询用户信息
    if (pbLoginTimerId.value.length===0) {
      pbLoginTimerId.value.push(
        setInterval(() => {
          userAPi.GetPbUserAPI().then((res) => {
            if (res && res.data && res.data.userId) {
              window.$message.success("平博登录成功")
              pbLoginStatus.value = true
              userContextStore.setPbUserInfo(res.data)
              // 清除所有定时器
              pbLoginTimerId.value.forEach(timerId => {
                clearInterval(timerId);
              });
              // 清空数组以避免内存泄漏
              pbLoginTimerId.value = [];
            }
          }).catch(err => {
            console.log(err)
          })
        }, 1000)
      )
    }
  })
}


const openWindowPd = ref({
  type: 'web',
  contentUrl: '',
  userName: '',
  password: '',
  windowName: '平博',
  windowTitle: '平博',
  windowsId: ''
})
const logo = ref(logo_icon)

const options = ref([
  {
    label: 'IM体育',
    key: 'im_platform',
    icon: renderIcon(UserIcon)
  },
  {
    label: '韦德',
    key: 'wd_platform',
    icon: renderIcon(UserIcon)
  }
])
</script>

<style scoped>

</style>
